<template>
    <view class="container">
        <search @searchValue.user="doSearch"></search>
        <filterBar wx:if="{{skuval}}" @currentType.user="currentType"></filterBar>
        <view wx:if="{{skuval}}">
            <!--矩阵商品列表模块-->
            <shopGridList wx:if="{{!is_empty}}" :purchasetype="purchasetype"></shopGridList>
            <!--暂无数据显示-->
            <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
        </view>
        <view class="history" wx:if="{{!skuval}}">
            <view class="doc" style="color:#333;font-size:28rpx">热门搜索</view>
            <view class="lable">
                <view wx:for="{{keywordhisList}}" wx:key="item" @tap.stop="selHisKeyWord" data-id="{{item.id}}">
                    <view class="child {{item.sel=='1' ?'active':''}}">{{item.name}}</view>
                </view>
            </view>
            <view class="doc mt-30" style="color:#333;font-size:28rpx;position: relative;">历史记录
                <i @tap.stop="clearHis" class="iconfont icon-unie639"></i>
            </view>
            <view class="lable">
                <view wx:for="{{searchItem}}" wx:key="item" @tap.stop="lsjlWord" data-id="{{item}}">
                    <view class="child">{{item}}</view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {SEARCHHISTORY} from '@/utils/constant'
    import Searchs from '../../components/search'
    import FilterBar from '../../components/classify/filter_bar'
    import ShopGridList from '../../components/shop_grid_list'
    import BottomLoadMore from '../../components/common/bottomLoadMore'
    import Placeholder from '../../components/common/placeholder'
    import FilterSlider from '../../components/filterSlider'

    export default class Search extends wepy.page {
      config = {
        navigationBarTitleText: '搜索'
      }
      components = {
        search: Searchs,
        filterBar: FilterBar,
        filterSlider: FilterSlider,
        shopGridList: ShopGridList,
        bottomLoadMore: BottomLoadMore,
        placeholder: Placeholder
      }
      data = {
        list: [],
        showLoading: false,
        purchasetype: 1,
        is_empty: false,
        keywordhisList: [],
        page_total: '',
        skuval: false,
        form: {
          page: 1,
          limit: 10
        },
        searchItem: []
      }

      async getKeyWordHisList() {
        const json = await api.getHotProd()
        if (json.data.code == 0) {
          this.keywordhisList = json.data.data
        }
        this.$apply()
      }

      onLoad() {
        const t = this
        t.list = []
        t.skuval = false
        t.getKeyWordHisList()
        let history = wx.getStorageSync(SEARCHHISTORY)
        if (history) {
          t.searchItem = history
        }
        t.$apply()
      }

      computed = {}

      async doSearchGoods(type) {
        let t = this
        const json = await api.goodsSearch({
          query: t.form
        })
        if (json.data.code == 0) {
          t.page_total = Math.ceil(json.data.data.total / t.form['limit'])
          t.form['page'] = json.data.data.page
          if (type) {
            t.list = [...t.list, ...json.data.data.rows]
          } else {
            t.list = json.data.data.rows
          }
          if (!t.list || t.list[0] == null || t.list.length == 0) {
            t.is_empty = true
          } else {
            t.is_empty = false
          }
          t.$invoke('shopGridList', 'eachItem', t.list)
          t.skuval = true
          t.$apply()
        } else {
          tip.error(json.data.msg)
        }
        t.showLoading = false
        t.$apply()
      }

      methods = {
        //      过滤器的type
        currentType(obj) {
          const t = this
          delete t.form['sortField']
          delete t.form['params["size"]']
          delete t.form['params["nts"]']
          delete t.form['dir']
          let name = obj.name,
            type = obj.type,
            size = obj.size
          if (name == 'zonghe') {
            t.form['sortField'] = 'sum_pay'
          } else if (name == 'sale') {
            t.form['params["nts"]'] = 1
          } else if (name == 'price') {
            t.form['sortField'] = 'amount'
            if (type == 'desc') {
              t.form['dir'] = 'ASC'
            } else if (type == 'asc') {
              t.form['dir'] = 'DESC'
            }
          } else if (name == 'sku') {
            if (size) {
              t.form['params["size"]'] = size
            }
          }
          t.doSearchGoods()
        },
        doSearch(val) {
          const t = this
          t.list = []
          t.is_empty = false
          t.showLoading = true
          delete t.form['params["categoryId"]']
          t.form['page'] = 1
          t.form['params["keyWord"]'] = val
          if (!t.searchItem.includes(val)) {
            t.searchItem = [val, ...t.searchItem]
            wx.setStorageSync(SEARCHHISTORY, t.searchItem)
          }
          t.doSearchGoods()
        },
        selHisKeyWord(e) {
          let id = e.currentTarget.dataset.id
          const t = this
          t.form['params["brandId"]'] = id
          this.doSearchGoods()
        },
        lsjlWord(e) {
          let id = e.currentTarget.dataset.id
          const t = this
          t.form['params["keyWord"]'] = id
          this.doSearchGoods()
        },
        clearHis() {
          wx.removeStorageSync(SEARCHHISTORY)
          this.searchItem = []
          this.$apply()
        }
      }

      //加载更多
      onReachBottom() {
        let that = this
        that.showLoading = true
        if (that.page_total > that.form['page']) {
          that.form['page']++
          that.doSearchGoods(1)
        } else {
          that.showLoading = false
        }
      }
    }
</script>

<style lang="less">
.container {
    height: 100vh;
}
.icon-unie639 {
    position: absolute;
    right: 0;
    top: 0;
    color: #999;
}
.history {
    padding: 20px 20px;
}
.doc {
    color: #999;
    font-size: 26rpx;
}
.lable {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -20rpx;
    .child {
        background: #f8f8ff;
        padding: 10rpx 25rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        font-size: 26rpx;
        margin-top: 5rpx;
        color: #999;
    }
}
.btn_box {
    width: 377rpx;
    margin: 0 auto;
    padding-top: 88rpx;
    .button {
        color: #999;
    }
}
.active {
    border: 1px solid #f23737;
    color: #f23737;
}
.btn {
    background: #f8f8ff !important;
    border: none !important;
}
.mt-30 {
    margin-top: 30rpx;
}
</style>
